<template>
  <div>
    <div class="header">
      <div class="center">
        <div class="top">
          <router-link to="/"
            ><img src="../assets/image/logo20.png" alt=""
          /></router-link>
          <div>
            <ul>
              <li>深圳总部</li>
              <li v-if="user == null">
                <router-link to="/main/login">登陆</router-link>
              </li>
              <li v-else>欢迎：{{ user }}</li>
              <li v-if="user == null">
                <router-link to="/main/register">注册</router-link>
              </li>
              <li v-else><button @click="loginOut">退出</button></li>
              <li><router-link to="/main/shopping">购物车</router-link></li>
            </ul>
            <div>订购热线：4008-557-667</div>
          </div>
        </div>
        <hr />
        <div class="floor">
          <ul>
            <li>
              <router-link to="/">
                <div>首页</div>
                <div>HOME</div>
              </router-link>
            </li>
            <li v-for="(item, index) in data" :key="index">
              <router-link :to="`/main${item.router}`">
                <div>{{ item.chtitle }}</div>
                <div>{{ item.entitle }}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getHdlist();
  },
  methods: {
    loginOut() {
      this.$store.commit("updateUser", null);
    },
    getHdlist() {
      // let url = "/mp/header_list";
      // this.axios
      //   .get(url)
      //   .then((res) => {
      //     console.log(res);
      //     this.data = res.data.data;
      //   })
      //   .catch((err) => {});
	  this.data=[
		  {chtitle:"SDK下载",entitle:"sdk"},
		  {chtitle:"Demo及源码",entitle:"demo"},
		  {chtitle:"API中心",entitle:"api"},
		  {chtitle:"最佳实践",entitle:"most"},
		  {chtitle:"新手入门",entitle:"new"},
	  ]
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 50%;
  margin: auto;
}
.header .center {
  position: relative;
  color: #572f1b;
  a {
    color: #572f1b;
  }
  .top {
    margin-top: 20px;
  }
  .top > div {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    div {
      margin-left: 70px;
      margin-top: 10px;
    }
    ul > li {
      margin-right: 20px;
      font-weight: bold;
    }
  }
  ul {
    display: flex;
  }
  .floor {
    ul {
      font-size: 14px;
      justify-content: space-between;
      text-align: center;
      li:hover > a {
        color: #a56224;
      }
      li div:nth-child(2) {
        font-size: 12px;
      }
    }
  }
}
</style>